<template>
	<view id="moments">
		<weiNoData :visible="isNoData" text="TA还未发布动态~~"></weiNoData>
		<view class="moments__post" v-for="(item, index) in dataList" :key="index" :id="'post-' + index">
			<view class="post-left"><image @tap="toMemberDetail(item.member.memberId,item.member.userName)" class="post_header" :src="$cdn.appAvatar + item.member.headPic"></image></view>

			<view class="post_right">
				<text class="post-username">{{ item.member.userName }}</text>
				<view id="paragraph" class="paragraph">{{ item.content }}</view>
				<!-- 相册 -->
				<view class="thumbnails">
					<view :class="item.photosArray.length === 1 ? 'my-gallery' : 'thumbnail'" v-for="(imageItem, index_images) in item.photosArray" :key="index_images">
						<image class="gallery_img" lazy-load mode="aspectFill" :src="$cdn.plazzPhoto + imageItem" @tap="previewImage(item.photosArray, index_images)"></image>
					</view>
				</view>
				<!-- 位置 -->
				<view class="toolbar">
					<view class="timestamp">
						<!-- <tui-icon name="position-fill" :size="12"></tui-icon> -->
						{{ item.place }}</view>
				</view>
<!-- 				<view class="toolbar">
					<view class="timestamp">
						{{ item.create_time }}</view>
				</view> -->
				<!-- 资料条 -->
				<view class="toolbar">
					<view class="timestamp">{{ formatTime(item.createTime) }}</view>
					<view class="like" @tap="comment(index)"><image src="../../static/index/comment.png"></image></view>
					<block v-if="item.publishMemberId==memberId">
						<view class="comment" @tap="del(index)">
							<image src="../../static/index/del.png"></image>
						</view>
					</block>
				</view>
				<!-- 赞／评论区 -->
				<view class="post-footer">
					<!-- <view class="footer_content">
						<image class="liked" src="../../static/index/liked.png"></image>
						<text class="nickname" v-for="(user,index_like) in post.like" :key="index_like">{{user.username}}</text>
					</view> -->
					<view class="footer_content" v-for="(commentItem, comment_index) in item.comments" :key="comment_index">
						<text class="comment-nickname">
							{{ commentItem.memberBase.userName }}:
							<text class="comment-content">{{ commentItem.content }}</text>
						</text>
					</view>
				</view>
			</view>
			<!-- 结束 post -->
		</view>

		<view class="foot" v-show="showInput">
			<chat-input @send-message="send_comment" @blur="blur" :focus="focus" :placeholder="input_placeholder"></chat-input>
			<!-- <chat-input @send-message="send_comment" @blur="blur" :placeholder="input_placeholder"></chat-input> -->
		</view>
		<!-- <view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view> -->

		<tui-tips ref="toast" position="center"></tui-tips>
		<!--加载loadding-->
		<tui-loadmore :visible="loadding" :index="3" type="primary"></tui-loadmore>
		<tui-nomore :visible="!pullUpOn"></tui-nomore>
		<!--加载loadding-->
	</view>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import weiNoData from '@/components/wei-nodata/wei-nodata.vue';
import tuiLoadmore from '@/components/loadmore/loadmore';
import tuiNomore from '@/components/nomore/nomore';
import chatInput from '@/components/im-chat/chatinput.vue'; //input框
import tuiTips from '@/components/tips/tips';
import tuiIcon from "@/components/icon/icon"
var dateUtil = require('../../common/dateUtil.js');

export default {
	computed: mapState(['userName','curLocalAddress','cityName', 'cityCode', 'latitude', 'longitude','memberId']),
	components: {
		chatInput,
		weiNoData,
		tuiLoadmore,
		tuiNomore,
		tuiTips,
		tuiIcon
	},
	data() {
		return {
			// 动态内容坐标
			index: '',

			input_placeholder: '评论', //占位内容
			focus: false, //是否自动聚焦输入框
			showInput: false, //评论输入框

			screenHeight: '', //屏幕高度(系统)
			platform: '',
			windowHeight: '', //可用窗口高度(不计入软键盘)

			$cdn: this.$cdn,
			// 分页必备参数
			isNoData: false,
			pageIndex: 1,
			loadding: false,
			pullUpOn: true,
			dataList: [],
			commentUserName: this.userName,
			// 查看别人动态
			memberIdDb:''
		};
	},
	mounted() {},
	onLoad(e) {
		uni.getSystemInfo({
			//获取设备信息
			success: res => {
				this.screenHeight = res.screenHeight;
				this.platform = res.platform;
			}
		});
		if (e.memberId && e.userName) {
			uni.setNavigationBarTitle({
				title: e.userName + ' 的动态'
			});
			this.memberIdDb=e.memberId;
			// uni.startPullDownRefresh();
			this.pagePlazaContent(1, false, {});
		}else{
			uni.showToast('未获取到有效ID')
		}
	},
	onShow() {
		uni.onWindowResize(res => {
			//监听窗口尺寸变化,窗口尺寸不包括底部导航栏
			if (this.platform === 'ios') {
				this.windowHeight = res.size.windowHeight;
				this.adjust();
			} else {
				if (this.screenHeight - res.size.windowHeight > 60 && this.windowHeight <= res.size.windowHeight) {
					this.windowHeight = res.size.windowHeight;
					this.adjust();
				}
			}
		});
	},
	onHide() {
		uni.offWindowResize(); //取消监听窗口尺寸变化
	},
	onUnload() {
		(this.max = 0), (this.data = []), (this.loadMoreText = '加载更多'), (this.showLoadMore = false);
	},

	//页面相关事件处理函数--监听用户下拉动作
	onPullDownRefresh: function() {
		// 下拉重置页码为第一页
		this.pageIndex = 1;
		this.pagePlazaContent(this.pageIndex, true, {});
		// 允许下拉和加载更多
		this.pullUpOn = true;
		this.loadding = false;
		// 拉新数据前，先隐藏
		this.isNoData = false;
	},
	// 页面上拉触底事件的处理函数
	onReachBottom: function() {
		if (!this.pullUpOn) return;
		// 显示加载更多loading
		this.loadding = true;
		this.pagePlazaContent(++this.pageIndex, false, {});
	},
	onNavigationBarButtonTap(e) {
		//监听标题栏点击事件
		if (e.index == 0) {
			this.navigateTo('publish');
		}
	},
	methods: {
		formatTime(dateStr){
			return dateUtil.formatTime(dateUtil.convertTime(dateStr), false);
		},
		// 是否展示刷新成功提示
		isShowRefresh(isRefresh) {
			if (isRefresh) {
				/* let options = {
					msg: '刷新成功',
					duration: 2000,
					type: 'translucent'
				};
				this.$refs.toast.showTips(options); */
				// 关闭下拉刷新loading
				uni.stopPullDownRefresh();
			}
		},
		// 获取
		pagePlazaContent(pageIndex, isRefresh, postData) {
			postData={publishMemberId:this.memberIdDb};
			this.tui
				.request(
					this.$api.pagePlazaContentById + '?pageNum=' + pageIndex + '&pageSize=' + this.$api.pageSize,
					postData,
					'POST',
					false,
					pageIndex == 1 && !isRefresh ? false : true
				)
				.then(res => {
					// 如是下拉刷新则待请求完成提示刷新成功
					this.isShowRefresh(isRefresh);
					if (res.code == 0) {
						// 如无数据
						if (res.data.total == 0) {
							this.isNoData = true;
							this.pullUpOn = false; // 不允许往下拉
							// this.loadding = false;
							// 加return 让后面nomore不展示【没有更多了】
							return;
						}

						if (pageIndex == 1) {
							this.dataList = res.data.rows;
						} else {
							this.dataList = this.dataList.concat(res.data.rows);
							// 隐藏加载更多loading
							this.loadding = false;
						}

						// 如已是最后一条，则提示无加载更多
						if (this.dataList.length >= res.data.total) {
							this.pullUpOn = false;
							this.loadding = false;
						}
					} else {
						this.tui.toast('失败，' + res.msg);
					}
				})
				.catch(res => {
					console.log(res);
				});
		},
		toMemberDetail(memberId,userName) {
			uni.navigateTo({
				url: '../member/member-detail?memberId='+memberId+ '&userName=' + userName
			});
		},
		comment(index) {
			this.showInput = true; //调起input框
			this.focus = true;
			this.index = index;
		},
		// 删除动态后端接口
		deletePlaza(postData) {
			this.tui
				.request(this.$api.deletePlaza, postData, 'POST', false, false)
				.then(res => {
					if (res.code == 0) {
						// 先后端删除，再删除前端
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						});
						this.dataList.splice(this.index,1);
					} else {
						this.tui.toast(res.msg);
					}
				})
				.catch(res => {
					console.log(res);
				});
		},
		// 删除动态
		del(index){
			this.index = index;
			uni.showModal({
			    content: '是否删除本条动态？',
			    success: (res) => {
			        if (res.confirm) {
						this.deletePlaza({contentId:this.dataList[this.index].contentId});
			        }
			    }
			})
		},
		adjust() {
			//当弹出软键盘发生评论动作时,调整页面位置pageScrollTo
			return;
			uni.createSelectorQuery()
				.selectViewport()
				.scrollOffset(res => {
					var scrollTop = res.scrollTop;
					let view = uni.createSelectorQuery().select('#post-' + this.index);
					view.boundingClientRect(data => {
						console.log('data:' + JSON.stringify(data));
						console.log('手机屏幕高度:' + this.screenHeight);
						console.log('竖直滚动位置' + scrollTop);
						console.log('节点离页面顶部的距离为' + data.top);
						console.log('节点高度为' + data.height);
						console.log('窗口高度为' + this.windowHeight);

						uni.pageScrollTo({
							scrollTop: scrollTop - (this.windowHeight - (data.height + data.top + 45)), //一顿乱算
							// scrollTop: 50,
							duration: 300
						});
					}).exec();
				})
				.exec();
		},
		blur: function() {
			this.init_input();
		},
		insertPlazaComment(postData) {
			this.tui
				.request(this.$api.insertPlazaComment, postData, 'POST', false, false)
				.then(res => {
					if (res.code == 0) {
					} else {
						this.tui.toast('评论失败', 1000, true);
					}
				})
				.catch(res => {
					console.log(res);
				});
		},
		// 发送评论
		send_comment: function(message) {
			console.log('content=' + message.content + 'userName=' + this.userName);
			var comment_content = message.content;
			this.dataList[this.index].comments.push({
				memberBase: { userName: this.userName },
				content: comment_content
			});
			this.init_input();
			// 掉后端接口保存评论
			this.insertPlazaComment({ contentId: this.dataList[this.index].contentId, content: comment_content });
		},
		init_input() {
			this.showInput = false;
			this.focus = false;
			this.input_placeholder = '评论';
			// 是评论=is_reply=fasle
			// this.is_reply = false;
		},
		previewImage(photosArray, image_index) {
			// let imageList=photoStr.split(',');
			let newImageList = [];
			for (var i = 0; i < photosArray.length; i++) {
				newImageList[i] = this.$cdn.plazzPhoto + photosArray[i];
			}
			var current = newImageList[image_index];
			uni.previewImage({
				indicator: 'default',
				current: current,
				urls: newImageList
			});
		}
	}
};
</script>

<style scoped>
@import url('../../common/index/index.css');
</style>
